<!--
 * @Author: yuanming
 * @Date: 2024-06-30 08:01:12
 * @LastEditors: yuanming
 * @LastEditTime: 2024-10-09 09:40:39
 * @Description: fileDescription
-->
<template>
    <div class="bikeMonitorLeftWarp">
        <div class="title-screen">共享单车统计</div>
        <div class="block">
            <div class="blockItem">
                <div>
                    <div>哈罗 接入总数</div>
                    <div>
                        <CountConponent :end-val="propsData.filingPark.haLuo || 0" :duration="3" />
                    </div>
                </div>
            </div>
            <div class="blockItem">
                <div>
                    <div>美团 接入总数</div>
                    <div>
                        <CountConponent :end-val="propsData.filingPark.meiTuan || 0" :duration="3" />
                    </div>
                </div>
            </div>
            <div class="blockItem">
                <div>
                    <div>青桔 接入总数</div>
                    <div>
                        <CountConponent :end-val="propsData.filingPark.qingJu || 0" :duration="3" />
                    </div>
                </div>
            </div>
        </div>
        <div class="title-screen">共享单车流入流出变化趋势</div>
        <LineArea width="90%" height="20vh" :chartData="lineAreaData" />
    </div>
</template>
<script setup>
import LineArea from '@/charts/lineArea.vue'
import CountConponent from '@/components/countToComponent/index.vue'

const propsData = defineProps({
    filingPark: {
        type: Object,
        default: () => {},
    },
})

const lineAreaData = ref({})

const { proxy } = getCurrentInstance()

const getBikeSeatInfo = () => {
    const req = {
        lng: '', // 经度
        lat: '', // 纬度
        scope: 2000, // 距离
        timeType: 1, // 今日1，近一周2，近一年3
    }
    proxy.$api.getParkBikeTrend(req).then((res) => {
        if (!res) return
        const {
            hBike, mBike, qBike, toatalBike,
        } = res
        lineAreaData.value = {
            xData: toatalBike && toatalBike.length > 0 ? toatalBike.map((item) => item.time) : [...new Array(7).keys()],
            sData: [
                { name: '总数量', value: toatalBike.map((item) => item.carNum * 1), color: '#CD5F20' },
                { name: '美团', value: mBike.map((item) => item.carNum * 1), color: '#FFBC42' },
                { name: '青桔', value: qBike.map((item) => item.carNum * 1), color: '#14BB9F' },
                { name: '哈啰', value: hBike.map((item) => item.carNum * 1), color: '#30BBFF' },
            ],
            xColor: '#CDE4FF',
            yColor: '#CDE4FF',
            legendShow: true,
            grid: {
                left: '0%',
                top: '5%',
                right: '5%',
                bottom: '10%',
                containLabel: true,
            },
        }
    })
}

onMounted(() => {
    getBikeSeatInfo()
})
</script>

<style lang="scss" scoped>
.bikeMonitorLeftWarp {
    width: 25vw;
    height: auto;
    min-height: 40vh;
    background-image: url("@/assets/images/box_left.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 3vw;
    top: 14vh;
    padding: 1vw 1vw;
    box-sizing: border-box;
    z-index: 100;
    .block {
        width: 85%;
        height: auto;
        margin-bottom: 2vh;
        %commonBlockStyle {
            width: 90%;
            height: auto;
            margin: 2vh auto 0 auto;
            padding: 2vh 1.5vw 2vh 6vw;
            box-sizing: border-box;
            background-image: url("@/assets/images/icon21.png");
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            div {
                div:nth-child(1) {
                    font-size: 1vw;
                    font-weight: 600;
                    color: #d3f1ff;
                }
                div:nth-child(2) {
                    font-size: 1.5vw;
                    font-family: "YouSheBiaoTiHei";
                    font-weight: 400;
                }
            }
        }
        .blockItem {
            @extend %commonBlockStyle;
        }
        .blockItem:nth-child(2) {
            background-image: url("@/assets/images/icon22.png");
        }
        .blockItem:nth-child(3) {
            background-image: url("@/assets/images/icon23.png");
        }
    }
}
</style>
